<template>
  <view class="container">
    <!-- 顶部统计模块 -->
    <view class="top-stats">
      <view class="top-stat-item">
        <text class="top-stat-value">200</text>
        <text class="top-stat-label">高校数量</text>
      </view>
      <view class="top-stat-item">
        <text class="top-stat-value">50</text>
        <text class="top-stat-label">重点城市</text>
      </view>
      <view class="top-stat-item">
        <text class="top-stat-value">500</text>
        <text class="top-stat-label">人才数量</text>
      </view>
    </view>

    <!-- 分类标签 -->
    <view class="tabs">
      <view 
        class="tab"
        :class="{ active: activeTab === 'region' }"
        @click="activeTab = 'region'"
      >
        地区
      </view>
      <view 
        class="tab"
        :class="{ active: activeTab === 'industry' }"
        @click="activeTab = 'industry'"
      >
        产业
      </view>
      <view 
        class="tab"
        :class="{ active: activeTab === 'major' }"
        @click="activeTab = 'major'"
      >
        专业
      </view>
    </view>

    <!-- 地图容器 -->
    <view class="map-container">
      <EChartsMap 
        :active-region="activeRegion"
        @region-click="handleRegionClick" 
      />
    </view>

    <!-- 地图下方内容区 -->
    <view class="content-area">
      <!-- 地区选项卡内容 -->
      <view v-if="activeTab === 'region'">
        <!-- 三列筛选功能区 -->
        <view class="filter-section">
          <view class="filter-item">
            <view class="filter-select">
              <picker mode="selector" :range="regionOptions" @change="onRegionChange" :value="selectedRegionIndex" :key="pickerKey">
                <view class="picker-value">{{ selectedRegion || '地区' }}</view>
              </picker>
              <text class="arrow-down">▼</text>
            </view>
          </view>

          <view class="filter-item">
            <view class="filter-select">
              <picker mode="selector" :range="majorOptions" @change="onMajorChange">
                <view class="picker-value">{{ selectedMajor || '专业' }}</view>
              </picker>
              <text class="arrow-down">▼</text>
            </view>
          </view>
          
          <view class="filter-item">
            <view class="filter-select">
              <picker mode="selector" :range="directionOptions" @change="onDirectionChange">
                <view class="picker-value">{{ selectedDirection || '方向' }}</view>
              </picker>
              <text class="arrow-down">▼</text>
            </view>
          </view>
        </view>
        
        <!-- 搜索框 -->
        <view class="search-section">
          <view class="search-box">
            <input 
              type="text" 
              class="search-input" 
              placeholder="输入院校/专业关键词" 
              confirm-type="search"
              v-model="searchKeyword"
              @input="debounceSearch"
            />
            <text class="icon-search"></text>
          </view>
        </view>
        
        <!-- 信息展示区 -->
        <view class="info-section">
          <!-- 统计头部 -->
          <view class="stat-header">
            <view class="stat-info">
              <view class="vertical-bar"></view>
              <text class="region-title">{{ selectedRegion || activeRegion || '全国' }}</text>
            </view>
            <text class="stat-text">院校{{ filteredSchools.length }}所，人才{{ getTalentCount() }}位</text>
          </view>

          <!-- 空状态提示 -->
          <view class="empty-state" v-if="filteredSchools.length === 0">
            <image class="empty-icon" src="/static/empty-state.png" mode="aspectFit"></image>
            <text class="empty-text">当前筛选条件下无匹配院校</text>
          </view>
          
          <!-- 院校列表 -->
      <scroll-view 
            v-else
            class="school-scroll" 
        scroll-y 
            :style="{ maxHeight: '400px' }"
      >
        <view 
          class="school-item" 
              v-for="(school, index) in filteredSchools"
          :key="school.id"
              @click="navigateToDetail(school)"
              :class="{ 'star': school.name === '复旦大学' }"
        >
          <view class="school-info">
                <view class="school-name">
                  {{ school.name }}
                  <text v-if="school.name === '复旦大学'" class="star-icon">★</text>
          </view>
                <text class="school-direction">{{ school.direction || getRandomDirection() }}</text>
              </view>
              <view class="arrow-icon" @click.stop="printSchoolName(school)">
                <image src="/static/images/right.svg" mode="aspectFit" class="right-arrow"></image>
              </view>
        </view>
      </scroll-view>
        </view>
    </view>

      <!-- 产业选项卡内容 -->
      <view v-if="activeTab === 'industry'">
        <!-- 产业筛选功能区 -->
        <view class="filter-section">
          <view class="filter-item">
            <view class="filter-select">
              <picker mode="selector" :range="industryOptions" @change="onIndustryChange">
                <view class="picker-value">{{ selectedIndustry || '产业' }}</view>
              </picker>
              <text class="arrow-down">▼</text>
          </view>
        </view>
          
          <view class="filter-item">
            <view class="filter-select">
              <picker mode="selector" :range="scaleOptions" @change="onScaleChange">
                <view class="picker-value">{{ selectedScale || '规模' }}</view>
              </picker>
              <text class="arrow-down">▼</text>
            </view>
          </view>
          
          <view class="filter-item">
            <view class="filter-select">
              <picker mode="selector" :range="regionOptions" @change="onIndustryRegionChange">
                <view class="picker-value">{{ selectedIndustryRegion || '地区' }}</view>
              </picker>
              <text class="arrow-down">▼</text>
            </view>
          </view>
        </view>

        <!-- 搜索框 -->
        <view class="search-section">
          <view class="search-box">
            <input 
              type="text" 
              class="search-input" 
              placeholder="输入企业/产业关键词" 
              confirm-type="search"
              v-model="industryKeyword"
              @input="debounceIndustrySearch"
            />
            <text class="icon-search"></text>
          </view>
        </view>
        
        <!-- 产业信息展示区 -->
        <view class="info-section">
          <!-- 统计头部 -->
          <view class="stat-header">
            <view class="stat-info">
              <view class="vertical-bar"></view>
              <text class="region-title">{{ selectedIndustry || '全部产业' }}</text>
            </view>
            <text class="stat-text">企业{{ filteredCompanies.length }}家，就业{{ getEmploymentCount() }}人</text>
          </view>
          
          <!-- 空状态提示 -->
          <view class="empty-state" v-if="filteredCompanies.length === 0">
            <image class="empty-icon" src="/static/empty-state.png" mode="aspectFit"></image>
            <text class="empty-text">当前筛选条件下无匹配企业</text>
          </view>
          
          <!-- 企业列表 -->
          <scroll-view 
            v-else
            class="school-scroll" 
            scroll-y 
            :style="{ maxHeight: '400px' }"
          >
              <view 
              class="school-item"
              v-for="(company, index) in filteredCompanies"
              :key="company.id"
              @click="navigateToCompanyDetail(company)"
            >
              <view class="school-info">
                <view class="school-name">
                  {{ company.name }}
              </view>
                <text class="school-direction">{{ company.industry }}</text>
            </view>
              <view class="arrow-icon" @click.stop="printCompanyName(company)">
                <image src="/static/images/right.svg" mode="aspectFit" class="right-arrow"></image>
          </view>
            </view>
          </scroll-view>
        </view>
      </view>
      
      <!-- 专业选项卡内容 -->
      <view v-if="activeTab === 'major'">
        <!-- 专业筛选功能区 -->
          <view class="filter-section">
          <view class="filter-item">
            <view class="filter-select">
              <picker mode="selector" :range="majorTypeOptions" @change="onMajorTypeChange">
                <view class="picker-value">{{ selectedMajorType || '专业类型' }}</view>
              </picker>
              <text class="arrow-down">▼</text>
            </view>
          </view>
          
          <view class="filter-item">
            <view class="filter-select">
              <picker mode="selector" :range="educationOptions" @change="onEducationChange">
                <view class="picker-value">{{ selectedEducation || '学历' }}</view>
              </picker>
              <text class="arrow-down">▼</text>
            </view>
          </view>
          
          <view class="filter-item">
            <view class="filter-select">
              <picker mode="selector" :range="hotOptions" @change="onHotChange">
                <view class="picker-value">{{ selectedHot || '热度' }}</view>
              </picker>
              <text class="arrow-down">▼</text>
            </view>
          </view>
        </view>
        
        <!-- 搜索框 -->
        <view class="search-section">
          <view class="search-box">
            <input 
              type="text" 
              class="search-input" 
              placeholder="输入专业/院系关键词" 
              confirm-type="search"
              v-model="majorKeyword"
              @input="debounceMajorSearch"
            />
            <text class="icon-search"></text>
          </view>
        </view>
        
        <!-- 专业信息展示区 -->
        <view class="info-section">
          <!-- 统计头部 -->
          <view class="stat-header">
            <view class="stat-info">
              <view class="vertical-bar"></view>
              <text class="region-title">{{ selectedMajorType || '全部专业' }}</text>
            </view>
            <text class="stat-text">专业{{ filteredMajors.length }}个，院校{{ getMajorSchoolCount() }}所</text>
          </view>
          
          <!-- 空状态提示 -->
          <view class="empty-state" v-if="filteredMajors.length === 0">
            <image class="empty-icon" src="/static/empty-state.png" mode="aspectFit"></image>
            <text class="empty-text">当前筛选条件下无匹配专业</text>
          </view>
          
          <!-- 专业列表 -->
          <scroll-view 
            v-else
            class="school-scroll" 
            scroll-y 
            :style="{ maxHeight: '400px' }"
          >
              <view 
              class="school-item"
              v-for="(major, index) in filteredMajors"
              :key="major.id"
              @click="navigateToMajorDetail(major)"
            >
              <view class="school-info">
                <view class="school-name">
                  {{ major.name }}
              </view>
                <text class="school-direction">{{ major.type }} | 相关院校: {{ major.schoolCount }}</text>
              </view>
              <view class="arrow-icon" @click.stop="printMajorName(major)">
                <image src="/static/images/right.svg" mode="aspectFit" class="right-arrow"></image>
            </view>
          </view>
        </scroll-view>
        </view>
      </view>
    </view>

    <!-- 专业多选弹窗 -->
    <uni-popup ref="majorPopup" type="bottom">
      <view class="multi-picker">
        <view class="picker-header">
          <text>专业</text>
          <text @click="clearMajorSelection">清除</text>
        </view>
        <view class="picker-content">
          <checkbox-group @change="onMajorsChange">
            <label class="check-item" v-for="(item, index) in majorOptions" :key="index">
              <checkbox :value="item" :checked="selectedMajors.includes(item)" />
              <text>{{ item }}</text>
            </label>
          </checkbox-group>
        </view>
        <view class="picker-footer">
          <button @click="closeMajorPicker">确定</button>
        </view>
      </view>
    </uni-popup>
    
    <!-- 方向多选弹窗 -->
    <uni-popup ref="directionPopup" type="bottom">
      <view class="multi-picker">
        <view class="picker-header">
          <text>方向</text>
          <text @click="clearDirectionSelection">清除</text>
        </view>
        <view class="picker-content">
          <checkbox-group @change="onDirectionsChange">
            <label class="check-item" v-for="(item, index) in directionOptions" :key="index">
              <checkbox :value="item" :checked="selectedDirections.includes(item)" />
              <text>{{ item }}</text>
            </label>
          </checkbox-group>
        </view>
        <view class="picker-footer">
          <button @click="closeDirectionPicker">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import EChartsMap from '@/components/EChartsMap.vue'

export default {
  components: { EChartsMap },
  data() {
    return {
      activeTab: 'region',
      activeRegion: null,
      pickerKey: 0,
      
      // 筛选相关
      selectedRegion: '地区',
      selectedRegionIndex: 0,
      selectedMajor: '',
      selectedDirection: '',
      selectedMajors: [],
      selectedDirections: [],
      searchKeyword: '',
      
      // 产业选项卡相关数据
      selectedIndustry: '',
      selectedScale: '',
      selectedIndustryRegion: '',
      industryKeyword: '',
      industryOptions: ['人工智能', '新能源', '生物医药', '金融科技', '先进制造', '文化创意'],
      scaleOptions: ['大型企业', '中型企业', '小型企业', '初创企业'],
      
      // 专业选项卡相关数据
      selectedMajorType: '',
      selectedEducation: '',
      selectedHot: '',
      majorKeyword: '',
      majorTypeOptions: ['工学', '理学', '文学', '经济学', '管理学', '医学', '法学', '教育学'],
      educationOptions: ['本科', '硕士', '博士'],
      hotOptions: ['热门专业', '新兴专业', '传统专业'],
      
      // 示例数据
      companies: [
        {
          id: 1,
          name: '科技创新集团',
          industry: '人工智能,大数据',
          scale: '大型企业',
          region: '上海',
          employment: 1200
        },
        {
          id: 2,
          name: '绿能新科技',
          industry: '新能源,智能制造',
          scale: '中型企业',
          region: '上海',
          employment: 580
        },
        {
          id: 3,
          name: '医疗科技有限公司',
          industry: '生物医药',
          scale: '中型企业',
          region: '上海',
          employment: 320
        },
        {
          id: 4,
          name: '北方科技集团',
          industry: '人工智能,智能制造',
          scale: '大型企业',
          region: '北京',
          employment: 2500
        },
        {
          id: 5,
          name: '智能科技创新公司',
          industry: '人工智能,新能源',
          scale: '小型企业',
          region: '北京',
          employment: 85
        }
      ],
      
      majors: [
        {
          id: 1,
          name: '计算机科学与技术',
          type: '工学',
          education: '本科,硕士,博士',
          hot: '热门专业',
          schoolCount: 58
        },
        {
          id: 2,
          name: '软件工程',
          type: '工学',
          education: '本科,硕士',
          hot: '热门专业',
          schoolCount: 42
        },
        {
          id: 3,
          name: '人工智能',
          type: '工学',
          education: '本科,硕士,博士',
          hot: '新兴专业',
          schoolCount: 25
        },
        {
          id: 4,
          name: '金融学',
          type: '经济学',
          education: '本科,硕士',
          hot: '热门专业',
          schoolCount: 36
        },
        {
          id: 5,
          name: '临床医学',
          type: '医学',
          education: '本科,硕士,博士',
          hot: '传统专业',
          schoolCount: 22
        }
      ],
      
      // 弹窗控制
      showMajorPicker: false,
      showDirectionPicker: false,
      
      // 选项数据
      regionOptions: [
        '北京', '天津', '上海', '重庆', 
        '河北', '山西', '辽宁', '吉林', '黑龙江', 
        '江苏', '浙江', '安徽', '福建', '江西', '山东', 
        '河南', '湖北', '湖南', '广东', '海南', 
        '四川', '贵州', '云南', '陕西', '甘肃', '青海', 
        '内蒙古', '广西', '西藏', '宁夏', '新疆', 
        '香港', '澳门', '台湾'
      ],
      majorOptions: [
        '计算机科学', '金融学', '临床医学', '机械工程', '工商管理', 
        '法学', '电子工程', '生物技术', '土木工程', '会计学'
      ],
      directionOptions: [
        '人工智能', '大数据', '新能源', '生物医药', '智能制造'
      ],
      
      // 学校数据
      schools: [
        {
          id: 1,
          name: '复旦大学',
          type: '本科',
          region: '上海市',
          direction: '生物医药,人工智能',
          talent: 52,
          longitude: 121.5,
          latitude: 31.3
        },
        {
          id: 2,
          name: '上海交通大学',
          type: '本科',
          region: '上海市',
          direction: '人工智能,智能制造',
          talent: 48,
          longitude: 121.4,
          latitude: 31.2
        },
        {
          id: 3,
          name: '同济大学',
          type: '本科',
          region: '上海市',
          direction: '智能制造,大数据',
          talent: 25,
          longitude: 121.5,
          latitude: 31.28
        },
        {
          id: 4,
          name: '北京大学',
          type: '本科',
          region: '北京市',
          direction: '人工智能,生物医药',
          talent: 65,
          longitude: 116.3,
          latitude: 39.99
        },
        {
          id: 5,
          name: '清华大学',
          type: '本科',
          region: '北京市',
          direction: '新能源,人工智能',
          talent: 70,
          longitude: 116.32,
          latitude: 40.0
        },
        {
          id: 6,
          name: '浙江大学',
          type: '本科',
          region: '浙江省',
          direction: '大数据,新能源',
          talent: 45,
          longitude: 120.1,
          latitude: 30.26
        }
      ],
      searchTimer: null,
      mapHeight: 300
    }
  },
  computed: {
    filteredSchools() {
      let result = this.schools
      
      // 1. 先按地区筛选
      if (this.selectedRegion) {
        // 将简化名称转为完整省份名称
        const provinceMap = {
          '北京': '北京市',
          '天津': '天津市',
          '上海': '上海市',
          '重庆': '重庆市',
          '内蒙古': '内蒙古自治区',
          '广西': '广西壮族自治区',
          '西藏': '西藏自治区',
          '宁夏': '宁夏回族自治区',
          '新疆': '新疆维吾尔自治区',
          '香港': '香港特别行政区',
          '澳门': '澳门特别行政区',
          '台湾': '台湾省'
        }
        
        const fullRegionName = provinceMap[this.selectedRegion] || 
                              (this.selectedRegion ? `${this.selectedRegion}省` : '')
        
        result = result.filter(school => school.region === fullRegionName)
      } else if (this.activeRegion) {
        // 处理activeRegion的情况
        const provinceMap = {
          '北京': '北京市',
          '天津': '天津市',
          '上海': '上海市',
          '重庆': '重庆市',
          '内蒙古': '内蒙古自治区',
          '广西': '广西壮族自治区',
          '西藏': '西藏自治区',
          '宁夏': '宁夏回族自治区',
          '新疆': '新疆维吾尔自治区',
          '香港': '香港特别行政区',
          '澳门': '澳门特别行政区',
          '台湾': '台湾省'
        }
        
        const fullRegionName = provinceMap[this.activeRegion] || 
                              (this.activeRegion ? `${this.activeRegion}省` : '')
        
        result = result.filter(school => school.region === fullRegionName)
      }
      
      // 2. 按专业筛选
      if (this.selectedMajor) {
        result = result.filter(school => 
          school.direction && school.direction.includes(this.selectedMajor)
        )
      }
      
      // 3. 按方向筛选
      if (this.selectedDirection) {
        result = result.filter(school => 
          school.direction && school.direction.includes(this.selectedDirection)
        )
      }
      
      // 4. 最后按关键词搜索
      if (this.searchKeyword.trim()) {
        const keyword = this.searchKeyword.toLowerCase().trim()
        result = result.filter(school => 
          school.name.toLowerCase().includes(keyword) || 
          (school.direction && school.direction.toLowerCase().includes(keyword))
        )
      }
      
      return result
    },
    schoolMarkers() {
      return this.filteredSchools.map(school => ({
        id: school.id,
        name: school.name,
        longitude: school.longitude,
        latitude: school.latitude,
        region: school.region
      }))
    },
    filteredCompanies() {
      return this.companies.filter(company => 
        company.region === this.selectedIndustryRegion &&
        company.industry.includes(this.selectedIndustry)
      )
    },
    filteredMajors() {
      return this.majors.filter(major => 
        major.type === this.selectedMajorType &&
        major.education.includes(this.selectedEducation) &&
        major.hot === this.selectedHot
      )
    }
  },
  mounted() {
    // 初始化时设置selectedRegionIndex
    this.initRegionIndex();
  },
  methods: {
    // 添加初始化方法
    initRegionIndex() {
      // 根据selectedRegion找到对应的索引
      const provinceMap = {
        '北京市': '北京',
        '天津市': '天津',
        '上海市': '上海',
        '重庆市': '重庆',
        '内蒙古自治区': '内蒙古',
        '广西壮族自治区': '广西',
        '西藏自治区': '西藏',
        '宁夏回族自治区': '宁夏',
        '新疆维吾尔自治区': '新疆',
        '香港特别行政区': '香港',
        '澳门特别行政区': '澳门',
        '台湾省': '台湾'
      };
      
      // 尝试直接匹配
      let index = this.regionOptions.findIndex(item => item === this.selectedRegion);
      
      // 如果没找到，尝试将完整省份名称转为简称再匹配
      if (index === -1 && provinceMap[this.selectedRegion]) {
        index = this.regionOptions.findIndex(item => item === provinceMap[this.selectedRegion]);
      }
      
      // 如果还没找到，尝试将选择的地区加上"省"后缀再匹配
      if (index === -1) {
        index = this.regionOptions.findIndex(item => `${item}省` === this.selectedRegion);
      }
      
      // 如果还没找到，尝试将选择的地区加上"市"后缀再匹配
      if (index === -1) {
        index = this.regionOptions.findIndex(item => `${item}市` === this.selectedRegion);
      }
      
      if (index !== -1) {
        this.selectedRegionIndex = index;
      }
    },
    handleRegionClick(region) {
      console.log('【地图点击事件】收到区域名称：', region, typeof region);
      console.log('【地图点击前】当前状态：activeRegion=', this.activeRegion, '，selectedRegion=', this.selectedRegion, '，selectedRegionIndex=', this.selectedRegionIndex);
      
      // 直接调试输出筛选框数据
      console.log('【地图点击】可用的地区选项：', this.regionOptions);
      
      // 取消选择
      if (!region) {
        this.activeRegion = null;
        this.selectedRegion = '地区'; // 恢复默认文本
        this.selectedRegionIndex = -1;
        console.log('【地图点击】重置地区选择，索引设为:', this.selectedRegionIndex);
        
        // 强制重新渲染picker
        this.pickerKey += 1;
        this.$forceUpdate();
        return;
      }
      
      // 直接在这里更新所有相关状态
      this.updateAllRegionState(region);
    },
    
    // 新增方法：统一更新所有与地区相关的状态
    updateAllRegionState(region) {
      console.log('【统一更新】开始更新所有与地区相关的状态，接收到的region:', region);
      
      // 步骤1: 确保 region 是简化格式 (北京，而不是北京市)
      const provinceMap = {
        '北京市': '北京',
        '天津市': '天津',
        '上海市': '上海',
        '重庆市': '重庆',
        '内蒙古自治区': '内蒙古',
        '广西壮族自治区': '广西',
        '西藏自治区': '西藏',
        '宁夏回族自治区': '宁夏',
        '新疆维吾尔自治区': '新疆',
        '香港特别行政区': '香港',
        '澳门特别行政区': '澳门',
        '台湾省': '台湾'
      };
      
      // 如果是完整省份名，转为简称
      let simplifiedRegion = provinceMap[region] || region;
      if (!simplifiedRegion) {
        // 尝试去掉省、市等后缀
        simplifiedRegion = region.replace(/(省|市|自治区|特别行政区)$/, '');
      }
      
      console.log('【统一更新】简化后的地区名:', simplifiedRegion);
      
      // 步骤2: 查找并更新 selectedRegionIndex
      let regionIndex = this.regionOptions.findIndex(item => item === simplifiedRegion);
      console.log('【统一更新】直接匹配查找结果:', regionIndex);
      
      if (regionIndex !== -1) {
        console.log('【统一更新】找到匹配区域在下拉框中的位置:', regionIndex);
      } else {
        console.log('【统一更新】未找到匹配区域，尝试模糊匹配');
        
        // 尝试模糊匹配，省、市后缀可能导致不匹配
        for (let i = 0; i < this.regionOptions.length; i++) {
          const option = this.regionOptions[i];
          if (
            simplifiedRegion.includes(option) || 
            option.includes(simplifiedRegion) ||
            `${option}省` === region ||
            `${option}市` === region
          ) {
            console.log('【统一更新】找到模糊匹配项:', option, '索引:', i);
            regionIndex = i;
            simplifiedRegion = option; // 使用筛选框中的选项格式
            break;
          }
        }
      }
      
      // 如果需要，可以添加更多匹配逻辑...
      
      // 特殊处理贵州省
      if (region === '贵州省' || simplifiedRegion === '贵州') {
        const gzIndex = this.regionOptions.findIndex(item => item === '贵州');
        if (gzIndex !== -1) {
          console.log('【统一更新】特殊处理贵州省，找到索引:', gzIndex);
          regionIndex = gzIndex;
          simplifiedRegion = '贵州';
        }
      }
      
      // 步骤3: 强制更新所有相关状态
      if (regionIndex !== -1) {
        // 更新索引
        this.selectedRegionIndex = regionIndex;
        
        // 更新选中的地区文本
        this.selectedRegion = simplifiedRegion;
        
        // 更新地图选中状态
        this.activeRegion = simplifiedRegion;
        
        // 增加pickerKey强制重新渲染
        this.pickerKey += 1;
        console.log('【统一更新】状态已更新：', {
          selectedRegion: this.selectedRegion,
          activeRegion: this.activeRegion,
          selectedRegionIndex: this.selectedRegionIndex,
          pickerKey: this.pickerKey
        });
        
        // 使用setTimeout强制更新
        setTimeout(() => {
          this.$forceUpdate();
          console.log('【统一更新】强制更新完成');
        }, 0);
      } else {
        console.log('【统一更新】警告：未能找到匹配的地区索引，无法更新筛选框');
      }
    },
    
    // 新增方法：触发数据刷新
    triggerDataRefresh() {
      console.log('【数据刷新】触发数据刷新');
      // 这里可以添加其他需要刷新的逻辑
    },
    
    updateRegionPicker(region, foundIndex) {
      // 方法1：直接使用找到的索引
      if (foundIndex !== -1) {
        console.log('【更新选择器】方法1：直接使用找到的索引:', foundIndex);
        this.selectedRegionIndex = foundIndex;
        
        // 使用 nextTick 和强制更新视图
        this.$nextTick(() => {
          console.log('【更新选择器】nextTick中更新了索引:', this.selectedRegionIndex);
          this.$forceUpdate();
          
          // 延迟检查更新是否生效
          setTimeout(() => {
            console.log('【更新选择器】延迟检查 - selectedRegionIndex =', this.selectedRegionIndex);
          }, 100);
        });
        
        return true;
      }
      
      // 方法2：转换省份名称格式
      console.log('【更新选择器】方法2：尝试转换省份格式');
      const provinceMap = {
        '北京市': '北京',
        '天津市': '天津',
        '上海市': '上海',
        '重庆市': '重庆',
        '内蒙古自治区': '内蒙古',
        '广西壮族自治区': '广西',
        '西藏自治区': '西藏',
        '宁夏回族自治区': '宁夏',
        '新疆维吾尔自治区': '新疆',
        '香港特别行政区': '香港',
        '澳门特别行政区': '澳门',
        '台湾省': '台湾'
      };
      
      // 尝试简称转全称或全称转简称
      let foundMatch = false;
      for (const [full, abbr] of Object.entries(provinceMap)) {
        // 尝试完整名称匹配
        if (region === full) {
          const newIndex = this.regionOptions.findIndex(item => item === abbr);
          console.log('【更新选择器】尝试全称->简称匹配:', full, '->', abbr, '索引:', newIndex);
          if (newIndex !== -1) {
            this.selectedRegionIndex = newIndex;
            this.selectedRegion = abbr; // 更新为简称以匹配下拉框
            console.log('【更新选择器】通过省份映射找到索引:', newIndex, '更新selectedRegion为:', abbr);
            this.$forceUpdate();
            foundMatch = true;
            break;
          }
        } 
        // 尝试简称匹配
        else if (region === abbr) {
          const newIndex = this.regionOptions.findIndex(item => item === abbr);
          console.log('【更新选择器】尝试简称直接匹配:', abbr, '索引:', newIndex);
          if (newIndex !== -1) {
            this.selectedRegionIndex = newIndex;
            console.log('【更新选择器】通过简称直接匹配找到索引:', newIndex);
            this.$forceUpdate();
            foundMatch = true;
            break;
          }
        }
      }
      
      // 方法3：使用延迟设置作为备用方案
      if (!foundMatch) {
        console.log('【更新选择器】所有匹配尝试失败，尝试延迟备用方案');
        
        // 遍历所有可能的省份名称格式进行匹配
        setTimeout(() => {
          // 再次尝试直接匹配
          const delayedIndex = this.regionOptions.findIndex(item => 
            item === region || 
            item === region.replace(/(省|市|自治区|特别行政区)$/, '') ||
            `${item}省` === region ||
            `${item}市` === region
          );
          
          if (delayedIndex !== -1) {
            console.log('【更新选择器】延迟方案找到匹配:', delayedIndex, '对应地区:', this.regionOptions[delayedIndex]);
            this.selectedRegionIndex = delayedIndex;
            this.selectedRegion = this.regionOptions[delayedIndex];
            this.$forceUpdate();
            console.log('【更新选择器】延迟更新完成：', this.selectedRegionIndex, this.selectedRegion);
          } else {
            console.log('【更新选择器】所有匹配方法均失败');
            
            // 最后进行模糊匹配
            const fuzzyMatch = this.regionOptions.findIndex(item => region.includes(item) || item.includes(region));
            if (fuzzyMatch !== -1) {
              console.log('【更新选择器】模糊匹配成功:', fuzzyMatch, '对应地区:', this.regionOptions[fuzzyMatch]);
              this.selectedRegionIndex = fuzzyMatch;
              this.selectedRegion = this.regionOptions[fuzzyMatch];
              this.$forceUpdate();
            }
          }
        }, 200);
      }
      
      console.log('【更新选择器完成】当前状态：activeRegion=', this.activeRegion, '，selectedRegion=', this.selectedRegion, '，selectedRegionIndex=', this.selectedRegionIndex);
      return foundMatch;
    },
    onRegionChange(e) {
      const index = e.detail.value;
      const region = this.regionOptions[index];
      console.log('【下拉框选择】选择了区域:', region, '索引:', index);
      console.log('【下拉框选择前】当前状态：activeRegion=', this.activeRegion, '，selectedRegion=', this.selectedRegion, '，selectedRegionIndex=', this.selectedRegionIndex);
      
      // 更新选中区域状态
      this.selectedRegion = region;
      this.selectedRegionIndex = index;
      // 通知地图组件更新选中状态
      this.activeRegion = region;
      
      // 强制刷新UI和数据
      this.$nextTick(() => {
        this.$forceUpdate();
        // 此处已经通过计算属性filteredSchools触发了数据查询
        console.log('【下拉框选择】数据已刷新，当前筛选结果数量:', this.filteredSchools.length);
      });
      
      console.log('【下拉框选择后】当前状态：activeRegion=', this.activeRegion, '，selectedRegion=', this.selectedRegion, '，selectedRegionIndex=', this.selectedRegionIndex);
    },
    onMajorChange(e) {
      const index = e.detail.value
      this.selectedMajor = this.majorOptions[index]
    },
    onDirectionChange(e) {
      const index = e.detail.value
      this.selectedDirection = this.directionOptions[index]
    },
    onMajorsChange(e) {
      this.selectedMajors = e.detail.value
    },
    onDirectionsChange(e) {
      this.selectedDirections = e.detail.value
    },
    clearMajorSelection() {
      this.selectedMajors = []
    },
    clearDirectionSelection() {
      this.selectedDirections = []
    },
    debounceSearch() {
      // 实现搜索防抖
      clearTimeout(this.searchTimer)
      this.searchTimer = setTimeout(() => {
        // 这里可以执行搜索操作
        console.log('Searching for:', this.searchKeyword)
      }, 300)
    },
    navigateToDetail(school) {
      uni.navigateTo({
        url: `/pages/school/detail?id=${school.id}&name=${school.name}`
      })
    },
    printSchoolName(school) {
      console.log('学校名称:', school.name)
    },
    getTalentCount() {
      return this.filteredSchools.reduce((sum, school) => sum + (school.talent || 0), 0)
    },
    getRandomDirection() {
      // 随机生成一个方向（仅作演示）
      const randomDirections = this.directionOptions
      return randomDirections[Math.floor(Math.random() * randomDirections.length)]
    },
    openMajorPicker() {
      this.$refs.majorPopup.open()
    },
    closeMajorPicker() {
      this.$refs.majorPopup.close()
    },
    openDirectionPicker() {
      this.$refs.directionPopup.open()
    },
    closeDirectionPicker() {
      this.$refs.directionPopup.close()
    },
    onIndustryChange(e) {
      const index = e.detail.value
      this.selectedIndustry = this.industryOptions[index]
    },
    onScaleChange(e) {
      const index = e.detail.value
      this.selectedScale = this.scaleOptions[index]
    },
    onIndustryRegionChange(e) {
      const index = e.detail.value
      this.selectedIndustryRegion = this.regionOptions[index]
    },
    getEmploymentCount() {
      return this.filteredCompanies.reduce((sum, company) => sum + company.employment, 0)
    },
    printCompanyName(company) {
      console.log('企业名称:', company.name)
    },
    onMajorTypeChange(e) {
      const index = e.detail.value
      this.selectedMajorType = this.majorTypeOptions[index]
    },
    onEducationChange(e) {
      const index = e.detail.value
      this.selectedEducation = this.educationOptions[index]
    },
    onHotChange(e) {
      const index = e.detail.value
      this.selectedHot = this.hotOptions[index]
    },
    getMajorSchoolCount() {
      return this.filteredMajors.reduce((sum, major) => sum + major.schoolCount, 0)
    },
    printMajorName(major) {
      console.log('专业名称:', major.name)
    },
    navigateToCompanyDetail(company) {
      uni.navigateTo({
        url: `/pages/company/detail?id=${company.id}&name=${company.name}`
      })
    },
    navigateToMajorDetail(major) {
      uni.navigateTo({
        url: `/pages/major/detail?id=${major.id}&name=${major.name}`
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: #1A1C3D;
  min-height: 100vh;
  color: #fff;
}
  
// 顶部统计模块
.top-stats {
    display: flex;
  justify-content: space-around;
  padding: 15px;
  margin: 15px;
  background-color: #282C54;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  
  .top-stat-item {
      text-align: center;
    .top-stat-value {
      font-size: 28px;
      font-weight: bold;
      display: block;
      color: #29A5FF;
      margin-bottom: 5px;
    }
    .top-stat-label {
      font-size: 12px;
      color: #f0f0f0;
    }
  }
}

.stats-box {
  display: flex;
  justify-content: space-around;
  padding: 15px;
  margin-bottom: 10px;
  background-color: #282C54;
  border-radius: 8px;
  margin: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  
  .stat-item {
    text-align: center;
    .stat-value {
      font-size: 28px;
      font-weight: bold;
      display: block;
      color: #29A5FF;
      margin-bottom: 5px;
    }
    .stat-label {
      font-size: 12px;
      color: #f0f0f0;
    }
  }
}

.tabs {
  display: flex;
  border-bottom: 1px solid #333;
  background-color: #1A1C3D;
  .tab {
    flex: 1;
    text-align: center;
    padding: 15px;
    color: #666;
    &.active {
      color: #29A5FF;
      border-bottom: 2px solid #29A5FF;
    }
  }
}

// 地图容器样式
.map-container {
  width: 100%;
  height: 50vh;
  position: relative;
}

// 新增样式 - 地图下方内容区
.content-area {
  padding: 16px;
  background-color: #1A1C3D;
}

// 筛选功能区
.filter-section {
    display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  
  .filter-item {
      flex: 1;
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
    
    .filter-select {
      position: relative;
      height: 36px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      display: flex;
      align-items: center;
      padding: 0 12px;
      background-color: #282C54;
      
      .picker-value {
        flex: 1;
        font-size: 14px;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .arrow-down {
        font-size: 12px;
        color: #999;
      }
    }
  }
}

// 多选弹窗
.multi-picker {
  background-color: #282C54;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  
  .picker-header {
      display: flex;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    text:first-child {
      font-weight: bold;
      font-size: 16px;
      color: #fff;
    }
    
    text:last-child {
      color: #29A5FF;
        font-size: 14px;
    }
  }
  
  .picker-content {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px 16px;
    
    .check-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      
      text {
        margin-left: 8px;
        font-size: 14px;
        color: #fff;
      }
    }
  }
  
  .picker-footer {
    padding: 16px;
    
    button {
          background-color: #29A5FF;
      color: #fff;
      border-radius: 6px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
    }
  }
}

// 搜索框
.search-section {
  margin-bottom: 16px;
  
  .search-box {
    position: relative;
    height: 40px;
    
    .search-input {
      width: 100%;
      height: 100%;
      padding: 0 40px 0 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      font-size: 14px;
      color: #fff;
      background-color: #282C54;
      
      &:focus {
        border-color: #29A5FF;
      }
      
      &::placeholder {
        color: #999;
      }
    }
    
    .icon-search {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2329A5FF'%3E%3Cpath fill-rule='evenodd' d='M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z' clip-rule='evenodd' /%3E%3C/svg%3E") no-repeat center;
      background-size: 20px;
    }
  }
}

// 信息展示区
.info-section {
  .stat-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    margin-bottom: 12px;
    
    .stat-info {
      display: flex;
      align-items: center;
    }
    
    .vertical-bar {
      width: 4px;
      height: 20px;
      background-color: #29A5FF;
      border-radius: 2px;
      margin-right: 8px;
    }
    
    .region-title {
            font-size: 16px;
      font-weight: bold;
      color: #fff;
    }
    
    .stat-text {
      font-size: 14px;
      color: #999;
    }
  }
  
  // 空状态
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    
    .empty-icon {
      width: 80px;
      height: 80px;
      margin-bottom: 16px;
      opacity: 0.5;
    }
    
    .empty-text {
      font-size: 14px;
      color: #999;
    }
  }
  
  // 院校列表
  .school-scroll {
    max-height: 400px;
    
    .school-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.05);
      }
      
      &.star {
        background-color: rgba(255, 215, 0, 0.05);
      }
      
      .school-info {
        flex: 1;
        
        .school-name {
          font-size: 16px;
          color: #fff;
          margin-bottom: 4px;
          font-weight: 500;
          display: flex;
          align-items: center;
          
          .star-icon {
            margin-left: 4px;
            color: #FFD700;
            font-size: 18px;
          }
        }
        
        .school-direction {
          font-size: 12px;
          color: #29A5FF;
        }
      }
      
      .arrow-icon {
        padding: 8px;
        cursor: pointer;
        
        &:hover {
          opacity: 0.8;
        }
        
        .right-arrow {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}
</style> 